<template>
  <div class="common-layout">
    <el-container>

      <el-main style="border-style: groove;border-width: 2px;height: 850px;width: 4550px;">
        <el-form>
            <el-form-item>
                <el-button type="primary" @click="open(null)">+新增</el-button>
                <el-button  type="primary" @click="allDelete()">-删除</el-button>
            </el-form-item>
        </el-form>
         <el-table :data="tableData" border style="width: 300%;"  @selection-change="handleSelectionChange">
           <el-table-column type="selection"width="55" /> 
        <el-table-column type="index" width="55" label="序号"/>
        <el-table-column prop="goodsName" label="商品名称" width="120"/>
        <el-table-column prop="productionBatch" label="生产批次"  width="90"/>
        <el-table-column prop="shelfLife" label="保质期（天）" width="80"/>
        <el-table-column prop="license" label="生产许可证号" width="110"/>
        <el-table-column prop="producer" label="生产企业" width="200"/>
        <el-table-column prop="completeness" label="信息完善度" width="90" >
            <template v-slot="scope">
               
                <el-text type="success" v-if="scope.row.completeness>=100"> {{ scope.row.completeness}}%</el-text>
                <el-text type="danger" v-else> {{ scope.row.completeness}}%</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="creator" label="创建人" width="90"/>
        <el-table-column prop="createdTime" label="创建时间" width="90">
            <template v-slot="scope">
                {{scope.row.createdTime.substring(0,19).replace("T"," ")}}
            </template>
        </el-table-column>
        <el-table-column prop="updator" label="修改人" width="90"/>
        <el-table-column prop="updatedTime" label="修改时间" width="90">
         <template v-slot="scope">
                {{scope.row.updatedTime==null?"":scope.row.updatedTime.substring(0,19).replace("T"," ")}}
            </template>
        </el-table-column>
        <el-table-column  label="操作" >
            <template v-slot="scoped">
                <el-tag  type="warning" style="cursor: pointer;" @click="navTo(scoped.row)">详情</el-tag>
                <el-tag type="primary"style="cursor: pointer;" @click="open(scoped.row)">修改</el-tag>
                <el-tag type="success" style="cursor: pointer;">导出溯源码</el-tag>
                <el-tag type="danger" style="cursor: pointer;" @click="Delted(scoped.row)">删除</el-tag>
            </template>
        </el-table-column>
    </el-table>
     <el-pagination
      v-model:current-page="paing.PageIndex"
      v-model:page-size="paing.PageSize"
      :page-sizes="[3,5,8,10]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="paing.recordCount"
    />


      </el-main>
    </el-container>
 
  </div>
       <el-dialog v-model="logic.isOpen" :title="logic.title" width="500" align-center draggable>
    <el-form :model="form" label-width="120">
      
      <el-form-item label="商品名称" >
        <el-select v-model="form.goodsId">
          <el-option v-for="item in getshow" :label="item.goodsName" :value="item.goodsId" />
        </el-select>
      </el-form-item>
      <el-form-item label="生产批次" >
        <el-input v-model="form.productionBatch"  />
      </el-form-item>
       <el-form-item label="保质期（天）" >
        <el-input v-model="form.shelfLife"  />
      </el-form-item>
      <el-form-item label="生产许可证号" >
        <el-input v-model="form.license"  />
      </el-form-item>
       <el-form-item label="信息完善度" >
        <el-input v-model="form.completeness"  />
      </el-form-item>
       <el-form-item label="生产企业" >
        <el-input v-model="form.producer"  />
      </el-form-item>
      <el-form-item label="封面图" >
       <el-upload
    class="avatar-uploader"
    action="http://localhost:5219/api/Upload/Uplock"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
  >
    <img style="width: 200px;height: 150px;" v-if="form.coverImage" :src="form.coverImage" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="logic.isOpen = false">取消</el-button>
        <el-button type="primary" @click="save">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted,watch } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router=useRouter();
import { useCounterStore } from '@/stores/counter';
const store=useCounterStore();
import { type FormInstance, type FormRules,ElMessage,ElMessageBox } from 'element-plus'

onMounted(()=>{
GetShow();
})
//批量逻辑删除
const listRows=ref<any[]>([])

const handleSelectionChange = (val:any) => {
  listRows.value = val
}
const allDelete=()=>{
  const idment=listRows.value.map((row)=>row.basicInforId).toString();

  
  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      if(listRows.value.length==0)
    {
      ElMessage.error("请您选择需要删除的信息")
      return;
    }
  
   
      axios.delete("http://localhost:5219/api/Management/LoicDelete",{params:{idment:idment}}).then(res=>{
        
        if(res.data.code==400)
      {
          
        ElMessage.success(res.data.message);
        GetShow();
      }
      else
      {
        ElMessage.error(res.data.message);
        return;
      }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    }) 
}

const getshow=ref<any>([])
const GetGoods=()=>{
    axios.get("http://localhost:5219/api/Management/GetGoods").then(res=>{
      getshow.value=res.data.data;
    })
}

//逻辑对象
const logic=reactive({
    isOpen:false,
    title:"",
    isAdd:false
})
const form = reactive({
  basicInforId:0,
  goodsId: "",
  productionBatch: "",
  shelfLife: "",
  license: "",
  completeness: "",
  producer: "",
  coverImage: ""
/*   creator: store.currentuser.userNickname,
  updator:store.currentuser.userNickname */
})
const handleAvatarSuccess= (perobj:any) =>{

   form.coverImage=perobj;
}

const open=(row:any)=>{

    logic.isOpen=true;
    GetGoods();
    if(row==null)
{
     logic.isAdd=true,
     logic.title="新增",
     form.goodsId="",
     form.productionBatch="",
     form.shelfLife="",
     form.license="",
     form.completeness="",
     form.producer="",
     form.coverImage=""

}
else
{
     logic.isAdd=false
     logic.title="更新",
     form.basicInforId=row.basicInforId,
     form.goodsId=row.goodsId,
     form.productionBatch=row.productionBatch,
     form.shelfLife=row.shelfLife,
     form.license=row.license,
     form.completeness=row.completeness,
     form.producer=row.producer,
     form.coverImage=row.coverImage

}

}
const save=()=>{

 if(logic.isAdd)
 {

    // let command=<any>{};
    //     command.goodsId=form.goodsId,
    //     command.productionBatch=form.productionBatch,
    //     command.shelfLife=form.shelfLife,
    //     command.license=form.license,
    //     command.completeness=form.completeness,
    //     command.producer=form.producer,
    //     command.coverImage=form.coverImage,
    //     command.createdTime=form.createdTime,
    //     command.creator=form.creator,

    axios.post("http://localhost:5219/api/Management/CreateBasicInformation",form).then(res=>{
        if(res.data.code==200)
    {
      ElMessage.success(res.data.message);
      GetShow();
       logic.isOpen = false
    }
    else
    {
         ElMessage.error(res.data.message);
         return;
    }
    })
 }
 else
 {
     axios.post("http://localhost:5219/api/Management/UpdateBasic",form).then(res=>{
        if(res.data.code==500)
    {
      ElMessage.success(res.data.message);
         GetShow();
       logic.isOpen = false
    }
    else
    {
         ElMessage.error(res.data.message);
         return;
    }
    })

 }
}

const tableData = ref<any>([])
const paing=reactive({
    PageIndex:1,
    PageSize:10,
    recordCount:0,
    pageCount:1
})
watch(paing,()=>{
    GetShow();
})
const GetShow=()=>{
    axios.get("http://localhost:5219/api/Management/GetBasic",{
        params:{
       PageIndex:paing.PageIndex,
       PageSize:paing.PageSize
        }
    }).then(res=>{
     
       tableData.value=res.data.data.list;
        paing.recordCount=res.data.data.recordCount
        paing.pageCount=res.data.data.pageCount
        
    })
   
}

//逻辑删除
const Delted=(row:any)=>{
    ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post("http://localhost:5219/api/Management/DeleteBasic",row).then(res=>{
        if(res.data.code==400)
      {
        ElMessage.success(res.data.message);
        GetShow();
      }
      else
      {
        ElMessage.error(res.data.message);
        return;
      }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}
//跳转到溯源详情页面
const navTo=(row:any)=>{

  router.push({
    name:"Detail",
    query:{productionBatch:row.productionBatch}
  })
}

</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

